<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>组件高级用法__递归组件</title>
</head>
<body>

<div id="app">
    <child-component :count="1"></child-component>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 组件在它的模板内可以递归地调用自己，只要给组件设置name选项就可以。
     *
     * 使用组件递归可以开发一些具有未知层级关系的独立组件，如级联选择器和树形控件等。
     * **/
    Vue.component("child-component",{
        name:"child-component",
        props:{
            count:{
                type:Number,
                default:1
            }
        },
        template:"<div class='child'><child-component :count='count + 1' v-if='count <3'></child-component></div>"
    });

    var app = new Vue({
        el:"#app",
    })



</script>
</body>
</html>